<template>
  <div class="register">
       <form novalidate autocomplete="off" class="form">
           <p style="margin-bottom:64px;color:#666;">已有账号，直接<a style="color:#f44336;font-size: 16px;" @click="goLogin">登录</a></p>
            <md-avatar class="md-large">
                <img src="../login/images/boy.png" alt="People">
            </md-avatar>
            <md-input-container>
                <label>用户名</label>
                <md-input type="text" required v-model="userName"></md-input>
            </md-input-container>
            <md-input-container>
                <label>密码</label>
                <md-input type="password" required v-model="passWord"></md-input>
            </md-input-container>
            <md-button class="md-raised md-warn" md-theme="brown" placeholder="注册" @click="startRegister">注册</md-button>
        </form>
        <md-dialog-alert :md-content="alert.content" :md-ok-text="alert.ok" ref="dialog"></md-dialog-alert>
  </div>
</template>
<script>
export default {
    data(){
        return {
            alert:{
                content:" ",
                ok:""
            },
            userName:"",
            passWord:""
        }
    },
    methods:{
        startRegister(){
            var userN = this.userName,
            pwd = this.passWord;
            if(!this.check({
                userName:userN,
                passWord:pwd
            })) return;
            //
        },
        isEmpty(val){
            return val==="";
        },
        check(obj){
            if(this.isEmpty(obj.userName)){  //为空
                this.alert.content = '用户名不能为空';
                this.openDialog('dialog');
                return false;
            }
            if(this.isEmpty(obj.passWord)){  //为空
                this.alert.content = '密码不能为空';
                this.openDialog('dialog');
                return false;
            }
            this.alert.content = '注册成功啦';
            this.openDialog('dialog');
            setTimeout(function(){
                this.$router.push("login");
            }.bind(this),1000);
            return true;
        },
        openDialog(ref){
            this.$refs[ref].open();
        },
        goLogin(){
            this.$router.push("login");
        }
    }
}
</script>
<style>
    @import '../../assets/css/login.css';
    .register{
        width: 100%;
        height: 100%;
        background: url(images/regist_bg.png) no-repeat 50%;
        background-size: cover
    }
</style>

